<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

// 接收传入的年份
const props = defineProps({
    year: {
        type: Number,
        required: true,
    },
});

const chartDom = ref();
let chart;

const initChart = (filteredData) => {
chart = echarts.init(chartDom.value);
chart.setOption({
    title: {
        text: `季度课时消费统计 - ${props.year}年`,
        left: 'center',
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        },
    },
    legend: {
        left: 'right',
        top: 'bottom',
        orient: 'vertical',
    },
    xAxis: {
        name: '季度',
        type: 'category',
        axisTick: { show: false },
        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
        axisLabel: {
            interval: 0,
        },
    },
    yAxis: [
        {
            name: '课消次数',
            type: 'value',
            position: 'left',
        },
        {
            name: '课消金额 (元)',
            type: 'value',
            position: 'right',
        },
    ],
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
                show: true,
                type: ['line', 'bar'],
            },
            restore: { show: true },
            saveAsImage: { show: true },
        },
    },
    grid: {
        left: '3%',
        right: '15%',
        bottom: '3%',
        containLabel: true
    },
    series: [
        {
            name: '张老师课消次数',
            type: 'bar',
            data: filteredData.zhangTeacher.counts,
        },
        {
            name: '张老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.zhangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '李老师课消次数',
            type: 'bar',
            data: filteredData.liTeacher.counts,
        },
        {
            name: '李老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.liTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '王老师课消次数',
            type: 'bar',
            data: filteredData.wangTeacher.counts,
        },
        {
            name: '王老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.wangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '赵老师课消次数',
            type: 'bar',
            data: filteredData.zhaoTeacher.counts,
        },
        {
            name: '赵老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.zhaoTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '孙老师课消次数',
            type: 'bar',
            data: filteredData.sunTeacher.counts,
        },
        {
            name: '孙老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.sunTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
    ],
});
};

const filterDataByYear = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            zhangTeacher: {
                counts: [38, 40, 42, 35],
                amounts: [9500, 9720, 11048, 11818]
            },
            liTeacher: {
                counts: [37, 41, 36, 32],
                amounts: [10059, 8416, 8802, 8576]
            },
            wangTeacher: {
                counts: [32, 33, 48, 51],
                amounts: [7250, 8585, 12620, 13045]
            },
            zhaoTeacher: {
                counts: [42, 45, 35, 43],
                amounts: [11166, 11796, 10740, 11150]
            },
            sunTeacher: {
                counts: [39, 39, 44, 49],
                amounts: [10552, 7732, 12660, 11381]
            }
        },
        2023: {
            zhangTeacher: {
                counts: [33, 39, 45, 32],
                amounts: [7460, 10040, 11972, 8326]
            },
            liTeacher: {
                counts: [43, 39, 39, 35],
                amounts: [9828, 9872, 11808, 8496]
            },
            wangTeacher: {
                counts: [33, 45, 48, 36],
                amounts: [7681, 11931, 11801, 7988]
            },
            zhaoTeacher: {
                counts: [39, 36, 48, 26],
                amounts: [9073, 7259, 12972, 7528]
            },
            sunTeacher: {
                counts: [47, 38, 41, 34],
                amounts: [11337, 6538, 11967, 7855]
            }
        },
        2022: {
            zhangTeacher: {
                counts: [41, 38, 42, 39],
                amounts: [10896, 10560, 11055, 10979]
            },
            liTeacher: {
                counts: [42, 41, 37, 36],
                amounts: [10696, 9387, 10126, 8818]
            },
            wangTeacher: {
                counts: [32, 42, 38, 36],
                amounts: [7588, 7398, 10478, 8190]
            },
            zhaoTeacher: {
                counts: [39, 35, 46, 42],
                amounts: [8712, 8728, 10561, 12061]
            },
            sunTeacher: {
                counts: [38, 39, 53, 43],
                amounts: [10244, 8419, 12922, 9820]
            }
        },
        2021: {
            zhangTeacher: {
                counts: [37, 45, 42, 33],
                amounts: [10143, 12832, 11080, 10470]
            },
            liTeacher: {
                counts: [33, 49, 41, 46],
                amounts: [7395, 13175, 10581, 11308]
            },
            wangTeacher: {
                counts: [27, 41, 47, 39],
                amounts: [6347, 10456, 11845, 12659]
            },
            zhaoTeacher: {
                counts: [40, 45, 48, 31],
                amounts: [11487, 13522, 12354, 7156]
            },
            sunTeacher: {
                counts: [40, 44, 53, 34],
                amounts: [10916, 10714, 14551, 9557]
            }
        },
        2020: {
            zhangTeacher: {
                counts: [43, 41, 47, 53],
                amounts: [11813, 7198, 12249, 15755]
            },
            liTeacher: {
                counts: [41, 43, 43, 37],
                amounts: [11848, 8144, 12156, 9444]
            },
            wangTeacher: {
                counts: [47, 33, 45, 47],
                amounts: [13658, 8215, 11405, 13902]
            },
            zhaoTeacher: {
                counts: [41, 36, 48, 31],
                amounts: [11662, 7652, 11298, 6414]
            },
            sunTeacher: {
                counts: [35, 34, 50, 52],
                amounts: [9112, 7592, 12718, 10233]
            }
        }
    };

    return allData[year] || {
        zhangTeacher: { counts: [], amounts: [] },
        liTeacher: { counts: [], amounts: [] },
        wangTeacher: { counts: [], amounts: [] },
        zhaoTeacher: { counts: [], amounts: [] },
        sunTeacher: { counts: [], amounts: [] },
    };
};

watch(() => props.year, (newYear) => {
    const filteredData = filterDataByYear(newYear);
    initChart(filteredData);
});

onMounted(() => {
    const filteredData = filterDataByYear(props.year);
    initChart(filteredData);
});
</script>

<style scoped>
/* Add any specific styles here */
</style>
